function rsui() {
    // 获取表格
    var table = $('#matrix-table');

    // 迭代每个单元格
    table.find('td').each(function () {
        var cell = $(this);
        var input = cell.find('input');
        var value = input.val();

        // 更改输入框类型为隐藏
        input.attr('type', 'hidden');

        // 判断输入框的值并设置样式
        if (value == 0) {
            cell.css('background-color', '');
        } else if (value == 1) {
            cell.css('background-color', 'black');
        }
        else if (value == 2) {
            cell.css('background-color', 'red');
        }
    });

    // 迭代每个单元格
    table.find('td').each(function () {
        var cell = $(this);
        var input = cell.find('input');

        // 添加点击事件处理程序
        cell.click(function () {
            var value = input.val();

            // 切换输入框的值并设置样式
            if (value == 0) {
                input.val(1);
                cell.css('background-color', 'black');
            } else if (value == 1) {
                input.val(0);
                cell.css('background-color', '');
            }
        });
    });

    // 设置所有单元格的相同宽度和高度
    var cellWidth = 20; // 更改为您希望的单元格宽度
    var cellHeight = 20; // 更改为您希望的单元格高度
    table.find('td').css({
        'width': cellWidth,
        'height': cellHeight,
        'padding': 0,
        'border': '1px solid black'
    });
}
rsui();

// 定义俄罗斯方块游戏对象
var Tetris = {
    // 游戏区域的大小
    rows: 20,
    cols: 10,
    // 游戏区域的状态 0表示空，1表示方块正在占用
    board: [],
    // 当前方块的位置和形状
    currentPiece: {
        row: 0,
        col: 0,
        shape: []
    },
    // 俄罗斯方块的形状
    shapes: [
        [[1, 1, 1, 1]], // I
        [[1, 1], [1, 1]], // O
        [[1, 1, 0], [0, 1, 1]], // Z
        [[0, 1, 1], [1, 1, 0]], // S
        [[1, 1, 1], [0, 1, 0]], // T
        [[1, 1, 1], [1, 0, 0]], // L
        [[1, 1, 1], [0, 0, 1]] // J
    ],
    // 初始化游戏
    init: function () {
        // 初始化游戏区域的状态
        for (var row = 0; row < this.rows; row++) {
            this.board[row] = [];
            for (var col = 0; col < this.cols; col++) {
                this.board[row][col] = 0;
            }
        }

        // 随机生成一个俄罗斯方块
        this.generatePiece();

        // 开始游戏循环
        this.gameLoop();
    },

    // 方块的移动和旋转
    movePiece: function (rowOffset, colOffset, rotationOffset) {
        this.currentPiece.row += rowOffset;
        this.currentPiece.col += colOffset;

        // 检查方块是否超出游戏区域或与已有方块重叠
        if (this.isCollision()) {
            // 撤销移动
            this.currentPiece.row -= rowOffset;
            this.currentPiece.col -= colOffset;

            // 检查是否需要旋转方块
            if (rotationOffset > 0) {
                this.rotatePiece();
            }
        }
    },
    rotatePiece: function () {
        var rotatedShape = [];
        for (var col = 0; col < this.currentPiece.shape[0].length; col++) {
            rotatedShape[col] = [];
            for (var row = 0; row < this.currentPiece.shape.length; row++) {
                rotatedShape[col][row] = this.currentPiece.shape[this.currentPiece.shape.length - row - 1][col];
            }
        }
        this.currentPiece.shape = rotatedShape;
    },
    // 检查方块的碰撞
    isCollision: function () {
        for (var row = 0; row < this.currentPiece.shape.length; row++) {
            for (var col = 0; col < this.currentPiece.shape[row].length; col++) {
                if (this.currentPiece.shape[row][col]) {
                    var boardRow = this.currentPiece.row + row;
                    var boardCol = this.currentPiece.col + col;

                    // 检查是否超出游戏区域或与已有方块重叠
                    if (boardRow < 0 || boardRow >= this.rows || boardCol < 0 || boardCol >= this.cols || this.board[boardRow][boardCol] === 1) {
                        return true;
                    }
                }
            }
        }
        return false;
    },
    // 更新游戏区域的状态
    updateBoard: function () {
        for (var row = 0; row < this.currentPiece.shape.length; row++) {
            for (var col = 0; col < this.currentPiece.shape[row].length; col++) {
                if (this.currentPiece.shape[row][col]) {
                    var boardRow = this.currentPiece.row + row;
                    var boardCol = this.currentPiece.col + col;

                    // 标记方块占用
                    this.board[boardRow][boardCol] = 2;
                }
            }
        }

        setMatrix(this.board);
        rsui();
    },
    // 游戏循环
    gameLoop: function () {
        // 清空游戏区域
        this.clearBoard();

        // 更新游戏区域的状态
        this.updateBoard();

        // 检查是否有完整的方块行
        this.clearLines();

        // 移动方块向下
        this.movePiece(1, 0, 0);
        console.log(this.currentPiece.row, this.currentPiece.col);

        // 延迟一定时间后继续游戏循环
        setTimeout(function () {
            Tetris.gameLoop();
        }, 500); // 更改为您希望的游戏速度
    },
    // 清空游戏区域
    clearBoard: function () {
        for (var row = 0; row < this.rows; row++) {
            for (var col = 0; col < this.cols; col++) {
                this.board[row][col] = 0;
            }
        }
    },
    // 检查并清除完整的方块行
    clearLines: function () {
        var clearedRows = [];
        for (var row = 0; row < this.rows; row++) {
            var isFullLine = true;
            for (var col = 0; col < this.cols; col++) {
                if (!this.board[row][col]) {
                    isFullLine = false;
                    break;
                }
            }
            if (isFullLine) {
                clearedRows.push(row);
            }
        }

        // 清除完整的方块行
        for (var i = 0; i < clearedRows.length; i++) {
            var clearedRow = clearedRows[i];
            for (var row = clearedRow; row >= 1; row--) {
                for (var col = 0; col < this.cols; col++) {
                    this.board[row][col] = this.board[row - 1][col];
                }
            }
            for (var col = 0; col < this.cols; col++) {
                this.board[0][col] = 0;
            }
        }
    },
    generatePiece: function () {
        var randomShape = this.shapes[Math.floor(Math.random() * this.shapes.length)];
        this.currentPiece.shape = randomShape;
        this.currentPiece.row = 0;
        this.currentPiece.col = Math.floor(this.cols / 2) - Math.floor(randomShape[0].length / 2);

        // 判断新方块是否与已有方块重叠，若重叠则游戏结束
        if (this.isCollision()) {
            this.gameOver(); // 游戏结束的操作
        }
    },

    gameOver: function () {
        // 游戏结束的操作，例如显示游戏结束的提示或重置游戏状态
        alert("Game Over!");
        // 重置游戏状态
        this.init();
    }

};

$(function () {
    // 初始化游戏
    Tetris.init();
})
